{% extends 'users/base.html' %}

{% block head %}
<title>添加文章</title>
{% endblock head %}  



{% block content %}
<div class="container">

  <section class="hero is-primary is-bold">
    <div class="hero-body">
      <div class="container">
        <!-- 添加一个具有右浮动类的水平分隔容器 -->
        <div class="level">
          <div class="level-left">
            <h1 class="title">创建新文章</h1> 
          </div>
          <div class="level-right">
            <!-- 返回按钮 -->

            <a class="button" href="{% url 'users:user_profile' %}">
              <span class="icon">
                <i class="fas fa-arrow-left"></i>
              </span>
              <span>返回个人中心</span>
            </a>

          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="box" style="padding: 80px;margin: 20px 0;">
    
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="field">
        <label class="label" for="{{ form.title.id_for_label }}">标题</label>
        <div class="control">
          <input class="input" type="text" id="{{ form.title.id_for_label }}" name="{{ form.title.html_name }}" placeholder="文章标题" value="{{ form.title.value|default:'' }}">
        </div>
      </div>
      
      <div class="field">
        <label class="label" for="{{ form.desc.id_for_label }}">描述</label>
        <div class="control">
          <textarea class="textarea" id="{{ form.desc.id_for_label }}" name="{{ form.desc.html_name }}" placeholder="文章描述">{{ form.desc.value|default:'' }}</textarea>
        </div>
      </div>
  
      <div class="field">
        <label class="label" for="{{ form.category.id_for_label }}">分类</label>
        <div class="control">
          <div class="select">
            <select class="input" id="{{ form.category.id_for_label }}" name="{{ form.category.html_name }}">
              {% for category in form.category.field.queryset %}
                <option value="{{ category.pk }}" {% if form.category.value == category.pk %}selected{% endif %}>{{ category.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
  
      <div class="field">
        <label class="label">标签</label>
        <div class="control">
          <div class="select is-multiple">
            {% for tag in form.tags.field.queryset %}
              <div class="checkbox">
                <label>
                  <input type="checkbox" 
                  name="{{ form.tags.html_name }}" 
                  value="{{ tag.pk }}" 
                  {% if tag.pk|slugify in form.tags.value|stringformat:"|" %}checked{% endif %}>
                  {{ tag.name }}
                </label>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
  
      <div class="field">
        <label class="label" for="{{ form.content.id_for_label }}">内容</label>
        <div class="control">
          <textarea class="textarea" id="{{ form.content.id_for_label }}" name="{{ form.content.html_name }}" placeholder="文章详情">{{ form.content.value|default:'' }}</textarea>
        </div>
      </div>
  
      <div class="field is-grouped">
        <div class="control">
          <button type="submit" class="button is-link">发布文章</button>
        </div>
      </div>

    </form>
  </div>

</div>
{% endblock %}